<template>
  <!-- 设置分成比例弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    style="width: 480px; padding: 0; border-radius: 9px"
    :before-close="close"
    align-center
  >
    <template #header>
      <div style="font-size: 16px; padding: 12px 32px">设置比例</div>
    </template>
    <template #default>
      <div class="form-box">
        <el-form-item label="观众比例值">
          <el-input v-model="input" style="width: 240px" placeholder="请输入" />
        </el-form-item>
        <div class="pre-ratio">
          当前比例：
          <span class="ratio-data">{{ ratioData.value }}</span>
        </div>
        <div class="tips">
          注意：麦上观众在直播间收到礼物的分成比例，礼物价值*主播礼物比例*观众比例=观众收益
        </div>
      </div>
      <div class="flex-x-end">
        <el-button
          type="primary"
          style="
            width: 84px;
            height: 38px;
            color: #86909c;
            background-color: #f2f3f5;
            border: none;
            border-radius: 2px;
          "
          @click="close"
        >
          取消
        </el-button>
        <el-button
          type="primary"
          style="
            width: 84px;
            height: 38px;
            background-color: #3c80ff;
            border-radius: 2px;
            box-shadow: 0px 2px 2px 0px rgba(22, 93, 255, 0.6);
          "
          class="m-r-30"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
export default {
  name: "RatioSetting",
};
</script>
<script lang="ts" setup>
import { ref } from "vue";

const dialogVisible = ref(false);
const input = ref("");
const ratioData = {
  value: "30%",
};
const show = () => {
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
};

defineExpose({
  show,
  close,
});
</script>

<style lang="scss" scoped>
.form-box {
  padding: 20px 32px;
  border-top: 1px solid #f5f5f5;
  .pre-ratio {
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    margin-top: 13px;
    .ratio-data {
      color: #ff4e6c !important;
    }
  }
  .tips {
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    margin-top: 9px;
    margin-bottom: 39px;
  }
}
.flex-x-end {
  border-top: 1px solid #f5f5f5;
  padding: 12px 0;
}
::v-deep .el-input__wrapper {
  box-shadow: none !important;
  border: none !important;
  background: #f5f5f5;
  border-radius: 0px;
  height: 38px;
}
</style>
